<!DOCTYPE html>
<html lang="zh-CN">
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<meta charset="utf-8"/>
<title> 美站库 炫美网站大全</title>
<link rel="stylesheet" type="text/css" href="images/index.css"/>
</head>
<body>
<div id="header">
    <div id="top" class="auto">
	    <div class="logo">
		    <h1>
		        <img src="images/logo.png"/>
			    <span>独家搜索</span>
			</h1>
	    </div>
		<div class="serach">
		     <form>
			     <input id="searchText" class="text" type="text"/>
				 <input id="searchButton" class="submit" type="buttom" value="搜索"/>
			</form>
		</div>
	</div>
	<div id="nav" class="auto">
	     <ul>
	         <li><a href="#">首页</a></li>
		     <li><a href="#">提交站点</a></li>
	     </ul>
	</div>
	<div id="runplay" class="auto">
	    <div class="left">
		    <a href="#"><img src="images/img1.jpg"/></a>
		</div>
		<div class="right">
		    <dl>
			    <dt id="runplayH">炫美网站，尽在美站库</dt>
				<dd class="txt" id="rate">本网站收集互联网上各种独家......</dd>
				<dd class="btn">
				    <a href="#">查看更多</a>
				</dd>
			</dl>
		</div>
	</div>
</div>
<div id="main">
    <div id="main1">
        <div id="wrap">
		    <div id="leftBody">
			    <div class="leftDiv1">
				     <h2>搜索</h2>
					 <p id="rsCount">美站库是<a href="http://www.sifangku.com" target="blank">私房库</a>视频html课程中的第一个项目实战课</p>
				</div>
				<div class="leftDiv2">
				    <h2>独家搜索站点</h2>
					<ul>
					    <li>
						    <a href="https://movie.douban.com/subject/27624661/?from=showing"><img src="https://img3.doubanio.com/view/photo/l/public/p2549523952.webp" height="125px" /></a>
							<p>比悲伤更悲伤的故事</p>
						</li>
						<li>
						    <a href="https://movie.douban.com/subject/26213252/?from=showing"><img src="https://img3.doubanio.com/view/photo/l/public/p2548870813.webp" height="125px"/></a>
							<p>惊奇队长</p>
						</li>
						<li>
						    <a href="https://movie.douban.com/subject/27060077/?from=showing"><img src="https://img3.doubanio.com/view/photo/l/public/p2549177902.webp" height="125px"/></a>
							<p>绿皮书</p>
						</li>
						<li>
						    <a href="https://movie.douban.com/subject/30196806/"><img src="http://imgs.tom.com/ent/201902/CONTENTD132E5DF05DC4C99.jpg" height="125px"/></a>
							<p>独家记忆</p>
						</li>
						<li>
                            <a href="https://movie.douban.com/subject/27166442/"><img src="http://cms-bucket.ws.126.net/2019/01/30/3258298df145423face70d4b9508c919.jpeg?imageView&thumbnail=550x0" height="125px"/></a>
							<p>夏目友人帐</p>
						</li>
					</ul>
				</div>
				<div class="leftDiv3">
				    <a href="https://movie.douban.com/">查看所有</a>
				</div>
			</div>
			<div id="rightBody">
			    <div class="rightDiv1">
				    <h2>酷文</h2>
					<ul>
					    <li>
						    <h3><a href="#" target="blank">随便写点什么</a></h3>
							<p>随便写随便写的随便写的随便写的随便写的随便写的的...</p>
						</li>
						<li>
						    <h3><a href="#" target="blank">随便写点什么</a></h3>
							<p>随便写随便写的随便写的随便写的随便写的随便写的的...</p>
						</li>
						<li>
						    <h3><a href="#" target="blank">随便写点什么</a></h3>
							<p>随便写随便写的随便写的随便写的随便写的随便写的的...</p>
						</li>
					</ul>
				</div>
				<div class="rightDiv2">
				     <dl class="dl1">
					     <dt><a href="#">随便</a></dt>
					     <dd>随便写点</dd>
					 </dl>
					 <dl class="dl2">
					     <dt><a href="#">随便</a></dt>
					     <dd>随便写点</dd>
					 </dl>
				</div>
			</div>
		</div>
	</div>
<div id="footer">
     <p class="p1">
	     <a href="#" target="_blank">首页</a>
		 <a href="#" target="_blank">关站</a>
		 <a href="#" target="_blank">酷文</a>
		 <a class="last" href="#" target="_blank">联系我们</a>
	 </p>
	 <p class="p2">
	    Copyright (c) 2014 | <a href="http://www.sifangku.com" target="_blank">私房库
	 </p>
</div>

<script>
      $(document).ready(function(){
	  
	  Var ajaxData=[];
	  Var titles=[];
	  
	  
	   $.ajax({url:"data/douban300.json",
	   
	        success:function(result){
			    ajaxData=result;
				  $("#rsCount").html("ajax访问成功");
				  //alert(result.subjects[2].title);
				  
				  //alert(result.subjects.length;
				  Var i=0;
				  for (i=0;i<ajaxData.subjects.length;i++)
				  {
				   title.push(ajaxData.subjects[i].title);
				   }
				   
				   }));
				   
				   
	   $("#searchText").autocomplete({
	      source:titles
		 });
		 
	   $("#searchButton").click(function(){
	      var usrIp=$("#searchText").val();
		  $("#runplayH").html("您刚输入:"+usrIp);
		  alert(usrIp);
		  
		 //反查用户选择的电影名称，查评分rate，查影片封面cover
		 
		     var rate;
			 var cover;
		     for(i==0;i<ajaxData.subjects.length;i++)
		        {
				    if(ajaxData.subjects.title==ursIp)
					{
					   rate=ajaxData.subjects[i].rate;
					   cover=ajaxData.subjects[i].cover;
					    $("#rate").html("电影评分为："+rate);
						
						return;
					}
				}
				
				
				
	});
	  
}}
</script>
</body>
</html>